<template>
  <div class="index-main">
    <UserIndexTop :showfun="show" :topnav="tablist"></UserIndexTop>
    <el-container style="height:100%">
      <el-aside width="165px" class="aside" style>
        <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
          <el-radio-button :label="false">展开</el-radio-button>
          <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group>-->
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          background-color="#5B93FF"
          text-color="#ffffff"
          active-text-color="#fff"
          @select="goLink"
        >
          <el-submenu
            v-for="(item, idx) in aside"
            :index="item.name"
            :key="idx"
            @click.native="goLink(item)"
          >
            <template slot="title">{{item.name}}</template>
            <el-menu-item
              :index="item.name"
              v-for="(cld, cldidx) in item.child"
              :key="cldidx + 'A'"
              @click.native="goLink(item)"
            >{{cld.title}}</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="main-con">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import UserIndexTop from "@/components/IndexCon/userindextop";
import { getSideBar } from "@/api/system";
export default {
  components: {
    UserIndexTop
  },
  data() {
    return {
      show: true,
      aside: [],
      tablist: [
        {
          text: "管理中心",
          link: "/manage/center"
        },
        {
          text: "我的订单",
          link: "/manage/order"
        },
        {
          text: "设置",
          link: "/manage/config"
        }
      ]
    };
  },
  mounted() {
    // 获取侧边栏
    getSideBar().then(res => {
      if (res.code === 200) {
        const arr = [];
        for (const i in res.data) {
          const obj = {};
          obj.name = res.data[i].title;
          obj.show = res.data[i].status;
          obj.url = res.data[i].name;
          obj.child = res.data[i].child;
          arr.push(obj);
        }
        console.log(arr);
        this.aside = arr;
      }
    });
  },
  methods: {
    // 跳转地址
    goLink(url) {
      if (url.child.length === 0) {
        this.$router.push(url.url);
      } else {
        this.$router.push(url.url + "/" + url.child[0].name);
        console.log(url.url + "/" + url.child[0].name);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.index-main {
  min-width: 750px;
  height: 100%;
  background: rgba(248, 250, 255, 1);
  overflow-x: hidden;
  .main-con {
    max-width: 100%;
    padding: 100px 0 0 100px;
  }
  .aside {
    background: #5b93ff;
    position: fixed;
    height: 100%;
    padding-top: 66px;
    overflow: hidden;
    .el-menu {
      width: 100%;
      text-align: center;
      border: none;
    }
  }
}
.el-submenu__title i {
  color: #ffffff;
}
</style>
